<template>
  <div class="box">
    <div class="menu-title">
      <a-icon
        class="trigger"
        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
        @click="() => (collapsed = !collapsed)"
      />
    </div>
    <a-menu
      mode="inline"
      :inline-collapsed="collapsed"
      style="border-right:none;flex:1"
      v-model="current"
      :default-open-keys="openKeys"
    >
      <a-sub-menu v-for="menuData in menuDatas" :key="menuData.name">
        <span slot="title"
          ><a-icon v-if="menuData.icon" :type="menuData.icon" /><span>{{
            menuData.name
          }}</span></span
        >
        <a-menu-item v-for="item in menuData.children" :key="item.name">
          <router-link :to="item.path">
            <a-icon v-if="item.icon" :type="item.icon" />
            <span class="nav-text">{{ item.name }}</span>
          </router-link>
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>
<script>
import { isEmpty, cloneDeep } from "lodash";

export default {
  data() {
    return {
      collapsed: false,
      menuDatas: [],
      current: ["首页"],
      openKeys: ["系统设置"]
    };
  },
  mounted() {
    this.init();
    this.$eventBus.$on("setMenu", menuDatas => {
      this.menuDatas = cloneDeep(menuDatas);
    });
  },
  methods: {
    init() {
      if (isEmpty(this.$store.state.menuDatas)) {
        this.menuDatas = cloneDeep(this.$store.state.permission.allMenus);
      } else {
        this.menuDatas = cloneDeep(this.$store.state.selectedMenus);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  height: 100%;
  background: white;
  opacity: 0.75;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  .menu-title {
    height: 30px;
    display: flex;
    opacity: 0.75;
    background: white;
    justify-content: center;
    .trigger {
      font-size: 20px;
      line-height: 30px;
    }
  }
}
</style>
